<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <h1>
        imageloader/index.html
    </h1>

    This example shows a very simple ImageLoader which generates the image on the fly.  A real image loader
    would of course get the data form a server.  Note - the other live examples use a custom ImageLoader
    which have the pixel data for images stored in them as base64 encoded strings.

    <br>
    <br>

    <div id="dicomImage" style="width:512px;height:512px"
         oncontextmenu="return false"
         onmousedown="return false">
    </div>

</div>
</body>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>

<script>
    // Loads an image given an imageId
    function loadImage(imageId) {
        const width = 256;
        const height = 256;
        const numPixels = width * height;
        const pixelData = new Uint16Array(numPixels);
        const rnd = Math.round(Math.random() * 255);
        let index = 0;
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                pixelData[index] = (x + rnd) % 256;
                index++;
            }
        }

        function getPixelData() {
            return pixelData;
        }

        const image = {
            imageId: imageId,
            minPixelValue: 0,
            maxPixelValue: 255,
            slope: 1.0,
            intercept: 0,
            windowCenter: 127,
            windowWidth: 256,
            render: cornerstone.renderGrayscaleImage,
            getPixelData: getPixelData,
            rows: height,
            columns: width,
            height: height,
            width: width,
            color: false,
            columnPixelSpacing: 1.0,
            rowPixelSpacing: 1.0,
            invert: false,
            sizeInBytes: width * height * 2
        };

        return {
          promise: new Promise((resolve) => resolve(image)),
          cancelFn: undefined
        }
    }

    cornerstone.registerImageLoader('myImageLoader', loadImage);

    // image enable the element
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);

    // load the image and display it
    const imageId = 'myImageLoader://1';
    cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);
    });
</script>
</html>
